{% extends "layout.html" %}

{% block content %}
<script src="../static/js/jquery.min.js" type="text/javascript" charset='utf-8'></script>
<script src="../static/js/echarts.js" charset='utf-8'></script>

<script type="text/javascript">
    // 初始化界面
    $(function () {
        $.ajaxSetup({async: false});

        $('#li_1').attr('class', '');
        $('#li_2').attr('class', '');
        $('#li_3').attr('class', '');
        $('#li_4').attr('class', '');
        $('#li_5').attr('class', '');
        $('#li_6').attr('class', '');
        $('#li_7').attr('class', 'active');

        $.get('/get_selectors', {},
            function (results) {
                hangye = results['hangye']
                xueli = results['xueli']
                jingyan = results['jingyan']
                for (var i = 0; i < hangye.length; i++) {
                    $('#hangye').append('<option value="' + hangye[i] + '">' + hangye[i] + '</option>');
                }

                for (var i = 0; i < xueli.length; i++) {
                    $('#xueli').append('<option value="' + xueli[i] + '">' + xueli[i] + '</option>');
                }

                for (var i = 0; i < jingyan.length; i++) {
                    $('#jingyan').append('<option value="' + jingyan[i] + '">' + jingyan[i] + '</option>');
                }
            }
        );

        $('#submit_predict').click(function (args) {
            $('#items').empty();
            var fengqu = $('#fengqu').val();
            var hangye = $('#hangye').val();
            var xueli = $('#xueli').val();
            var jingyan = $('#jingyan').val();

            var params = {'fengqu': fengqu, 'hangye': hangye, 'xueli': xueli, 'jingyan': jingyan};
            $.get('/tree_model_predict_salary', params,
                function (data) {
                    $('#predict_salary').text(data['pred_salary'].toFixed(0) + ' 元');
                    $('#xgb_pred_salary').text(data['xgb_pred_salary'] + ' 元');
                    recommend_jobs = data['recommend_jobs'];
                    recommend_jobs.forEach((job, index) => {
                        $('#items').append('<tr><td>' + job[0] + '</td><td>' + job[1] + '</td><td>' + job[2] + '</td><td>' + job[3] + '</td><td>' + job[4] + '</td><td>' + job[5] + '</td><td>' + job[6] + '</td><td>' + job[7] + '</td><td>' + job[8] + '</td></tr>')
                    });
                }
            );
        });
        
    });
</script>

<div class="container">
    <h3 class="page-header" >基于决策树模型和XGBoost模型的岗位薪资预测</h3>
    <div class="row">
        <div class="col-sm-12" style="font-size: 20px; margin-bottom: 20px;">
            <span>工作地区：</span>
            <select class="combobox" id="fengqu" style="margin-left: 10px; margin-right: 20px;">
                <option value="华东">华东</option>
                <option value="华北">华北</option>
                <option value="华中">华中</option>
                <option value="华南">华南</option>
                <option value="西南">西南</option>
                <option value="西北">西北</option>
                <option value="东北">东北</option>
            </select>

            <span>细分行业：</span>
            <select class="combobox" id="hangye" style="margin-left: 10px; margin-right: 20px; width: 200px;">
            </select>

            <span>学历：</span>
            <select class="combobox" id="xueli" style="margin-left: 10px; margin-right: 20px;">
            </select>

            <span>工作经验：</span>
            <select class="combobox" id="jingyan" style="margin-left: 10px; margin-right: 20px;">
            </select>

            <button class="btn btn-success" id="submit_predict" style="margin-left: 20px;">提交预测</button>
        </div>
    </div>
    <div class="container" id="echarts_content3" style="margin-top: 20px;">
        <p style="font-size: 18px;">决策树预测岗位薪资：<span id="predict_salary" style="color: red"></span></p>
        <p style="font-size: 18px;">XGB预测岗位薪资：<span id="xgb_pred_salary" style="color: red"></span></p>
        <div class="row" style="height:550px;" id="main5">
            <table class="table table-striped table-hover" style="margin-top: 20px; font-size: 15px" align="left">
                <thead>
                <tr>
                    <th style="width: 22%;">岗位名称</th>
                    <th style="width: 12%;">所属细分行业</th>
                    <th style="width: 12%;">公司</th>
                    <th style="width: 6%;">地点</th>
                    <th style="width: 8%;">薪资</th>
                    <th style="width: 10%;">工作经验要求</th>
                    <th style="width: 8%;">学历要求</th>
                    <th style="width: 6%;">人数</th>
                    <th style="width: 8%;">发布时间</th>
                </tr>
                </thead>
                <tbody id="items">
                </tbody>
            </table>
        </div>
    </div>
    <div class="container" id="salary_curve_container" style="margin-top: 40px;">
        <h4 style="margin-left: 10px;">不同工作经验下模型预测薪资对比（单位：万元/月）</h4>
        <div id="salary_curve_chart" style="width: 700px; height: 400px; margin: 0 auto;"></div>
    </div>
    <script type="text/javascript">
        function updateSalaryCurve() {
            var fengqu = $('#fengqu').val();
            var hangye = $('#hangye').val();
            var xueli = $('#xueli').val();
            $.get('/salary_predict_curve', {fengqu: fengqu, hangye: hangye, xueli: xueli}, function(data) {
                var exp_list = data.exp_list;
                var dt_result = data.dt_result;
                var xgb_result = data.xgb_result;
                var dt_true = data.dt_true;
                var xgb_true = data.xgb_true;
                var myChart = echarts.init(document.getElementById('salary_curve_chart'));
                var option = {
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['决策树预测', 'XGBoost预测', '真实值'] },
                    xAxis: { type: 'category', data: exp_list, name: '工作经验' },
                    yAxis: { type: 'value', name: '预测薪资（万元/月）' },
                    series: [
                        { name: '决策树预测', type: 'line', data: dt_result, color: '#1976d2', lineStyle: { type: 'solid', width: 3 }, symbol: 'circle', symbolSize: 8 },
                        { name: 'XGBoost预测', type: 'line', data: xgb_result, color: '#ff9800', lineStyle: { type: 'solid', width: 3 }, symbol: 'circle', symbolSize: 8 },
                        { name: '真实值', type: 'line', data: exp_list.map(function(_,i){
                            var a = dt_true[i], b = xgb_true[i];
                            if(a==null && b==null) return null;
                            if(a==null) return b;
                            if(b==null) return a;
                            return ((a+b)/2).toFixed(2);
                        }), color: '#00b050', lineStyle: { type: 'solid', width: 3 }, symbol: 'circle', symbolSize: 8 }
                    ]
                };
                myChart.setOption(option);
            });
        }
        // 页面初始化和参数变动时都刷新曲线
        $(function () {
            setTimeout(updateSalaryCurve, 500); // 页面初次加载
            $('#fengqu, #hangye, #xueli').on('change', updateSalaryCurve);
        });
    </script>
</div>

{% endblock %}
